<template>
  <div class="pinglun">
    <div class="pl-520am" data-id="25" data-classid="5" data-showhot="0">
      <div class="pl-area-post">
        <div class="pl-post">
          <div class="pl-textarea">
            <textarea
              class="pl-post-word"
              v-model.trim="form.cont"
              placeholder="有什么想对我说的呢？"
            ></textarea>
          </div>
          <div class="pl-tools">
            <ul>
              <li class="pl-tools-lastchild">
                <button class="pl-submit-btn" @click="submit_comment">
                  发 布
                </button>
              </li>
              <li class="username">
                <v-icon>mdi-account</v-icon>
                <input
                  type="text"
                  v-model.trim="form.name"
                  class="pl-key"
                  size="15"
                  placeholder="你的昵称"
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <br />
      <div class="pl-header">
        <br />
        共<em id="pl-joinnum">{{ count }}</em
        >条留言<span class="pl-userinfo" id="pl-userinfo"></span>
      </div>
      <v-progress-linear
        v-show="loading"
        indeterminate
        color="green"
      ></v-progress-linear>
      <!-- 提示 -->
      <v-alert v-show="system_error" dense outlined type="error">
        {{ system_error }}
      </v-alert>

      <div class="pl-show-list" id="pl-show-all">
        <div class="pl-area pl-show-box" v-for="(s, i) in lastest" :key="i">
          <div class="pl-area-userpic">
            <span class="userpic" :style="{backgroundColor:getUserPic(s.name).c}">{{ getUserPic(s.name).s }}</span>
          </div>
          <div class="pl-area-post">
            <div class="pl-show-title">
              <span>{{ s.name }}</span>
              <span class="pl-show-time pl-fr">{{ s.create_at }}</span>
            </div>
            <div class="pl-show-saytext">
              <!-- 引用 -->
              <template v-for="(ss, ii) in lastest">
                <div class="ecomment" v-if="ss.id==s.path" :key="ii">
                  <span class="ecommentauthor">引用 @{{ss.name}}：</span>
                  <div class="ecommenttext">
                    {{ss.cont}}
                  </div>
                </div>
              </template>
              {{ s.cont }}
            </div>
          </div>
          <div class="pl-clr"></div>
        </div>
      </div>
      <div id="pl-pagination"></div>
      <button
        v-show="query.page < query.pages && !loading"
        @click="load_more"
        class="showAllComment buttonGray"
        style="display: inline-block"
      >
        查看更多
      </button>
    </div>
  </div>
</template>
<script>
import axios from "../utils/axios"
import Cache  from '../utils/cache'
const colors = ['#7cb342','#424242','#c62828','#c2185b','#0097a7','#26a69a','#388e3c','#f4511e','#303f9f','#4527a0','#37474f']
export default {
  props: ["aid", "type"],
  data() {
    return {
      form: {
        name: "",
        cont: "",
        tel: "",
      },
      query: {
        page: 1,
        pages: 0,
      },
      loading: true,
      system_error: "",
      lastest: [],
      count: 0,
      
    };
  },
  
  mounted() {
    
    this.load_list();
  },
  methods: {
    getUserPic(name = "") {
      let s = name.substring(0, 1)
      s = s?s:' '
      let i = s.codePointAt()%colors.length
      return {
        s,
        c:colors[i],
      }
    },
    load_more() {
      if (this.query.page < this.query.pages) {
        this.query.page++;
        this.load_list();
      }
    },
    load_list() {
      this.loading = true;
      axios.get("gbook?page=" + this.query.page).then((res) => {
        this.loading = false;
        if (res.code != 200) {
          this.system_error = res.msg;
        } else {
          this.system_error = "";
          const data = res.data;
          this.lastest = this.lastest.concat(data.lastest);
          this.query.pages = data.pages;
          this.count = data.count;
        }
      });
    },
    submit_comment() {
      if (this.loading) {
        return;
      }
      if (this.form.cont == "") {
        this.system_error = "请输入内容！";
        return;
      }
      if (this.form.name == "") {
        this.system_error = "请输入昵称！";
        return;
      }
      this.loading = true;
      axios
        .post("/gbook", this.form)
        .then((res) => {
          this.loading = false;
          if (res.code != 200) {
            this.system_error = res.msg;
          } else {
            this.form.cont = "";
            this.system_error = "";
            this.query.page = 1;
            this.lastest = [];
            this.load_list();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.pl-area-post{
  padding: 1em 0;
}
.username {
  box-sizing: content-box;
}
.pl-show-tools span {
  color: #777;
}
.userpic {
  width: 3em;
  height: 3em;
  display: inline-block;
  border-radius: 50%;
  background-color: #303f9f;
  text-align: center;
  line-height: 3em;
  color: #fff;
  cursor: default;
  -moz-user-select: -moz-none;
  user-select: none;
}
</style>
